<template>
  <div>
    <p>我是父组件</p>
    <child 
    :str="str" 
    :obj="obj" 
    :arr="arr" 
    :num="num" 
    :sex="sex"
    @getdata="getData"></child>
    <children></children>
    <refdemo>
        <h1>slot</h1>
        <mark>alalalallalalalalala21 </mark>
    </refdemo>
    <div id="box"></div>
    <button @click="fadeToggle">ShowTime</button>
    <p>参数中的值：{{this.$route.query.username}}</p>
    <axios></axios>
  </div>
</template>

<script>
import child from "./child";
import children from './children';
import refdemo from './refdemo';
import axios from './axios'
export default {
  data() {
    return {
      str: "2020-01-29",
      obj: {
        name: "jack",
        age: 18,
      },
      arr: [0, 1, 2],
      num: 123, 
      sex: "1",
    };
  },
  created() {
    document.title = this.$route.meta.title
  },
  methods: {
    getData(val) {
      console.log(val);
    },
    fadeToggle(){
        this.$('#box').fadeToggle(3000)
    }
  },
  components: {
    child,
    children,
    refdemo,
    axios
  },
};
</script>

<style>
#box{
    width: 100px;
    height: 100px;
    background: #ff0;
}
</style>